<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部标题 -->
    <div class="py-4 text-center bg-blue-500">
      <h1 class="text-2xl font-bold text-white">选择支付方式</h1>
    </div>

    <div class="max-w-md mx-auto p-4">
      <a-card class="mb-4 shadow-sm">
        <!-- 微信支付方式 -->
        <div v-if="browserType === 'wechat' || browserType === 'unknown'" class="mb-6">
          <h2 class="text-lg font-medium text-gray-700 mb-4">微信支付</h2>
          <div class="space-y-4">
            <a-button
              type="primary"
              block
              size="large"
              class="wechat-button"
              @click="handlePay('wechat')"
            >
              <template #icon><wechat-outlined /></template>
              微信支付
            </a-button>

            <a-button
              type="primary"
              block
              size="large"
              class="wechat-button"
              @click="handlePay('wechat-isv')"
            >
              <template #icon><wechat-outlined /></template>
              微信支付(服务商)
            </a-button>

            <a-button
              type="primary"
              block
              size="large"
              class="wechat-button"
              @click="handlePay('leshua-wxpay')"
            >
              <template #icon><wechat-outlined /></template>
              乐刷微信支付
            </a-button>
          </div>
        </div>

        <!-- 支付宝支付方式 -->
        <div v-if="browserType === 'alipay' || browserType === 'unknown'">
          <h2 class="text-lg font-medium text-gray-700 mb-4">支付宝支付</h2>
          <div class="space-y-4">
            <a-button
              type="primary"
              block
              size="large"
              class="alipay-button"
              @click="handlePay('alipay')"
            >
              <template #icon><alipay-outlined /></template>
              支付宝支付
            </a-button>

            <a-button
              type="primary"
              block
              size="large"
              class="alipay-button"
              @click="handlePay('alipay-isv')"
            >
              <template #icon><alipay-outlined /></template>
              支付宝支付(服务商)
            </a-button>

            <a-button
              type="primary"
              block
              size="large"
              class="alipay-button"
              @click="handlePay('leshua-alipay')"
            >
              <template #icon><alipay-outlined /></template>
              乐刷支付宝支付
            </a-button>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { WechatOutlined, AlipayOutlined } from '@ant-design/icons-vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 订单信息
const orderNo = ref(route.query.orderNo as string)
const timestamp = ref(route.query.timestamp as string)
const nonce = ref(route.query.nonce as string)
const sign = ref(route.query.sign as string)

// 浏览器类型：'wechat' | 'alipay' | 'unknown'
const browserType = ref<'wechat' | 'alipay' | 'unknown'>('unknown')

// 检测浏览器环境
const detectBrowser = () => {
  const ua = navigator.userAgent.toLowerCase()
  if (ua.indexOf('micromessenger') !== -1) {
    browserType.value = 'wechat'
  } else if (ua.indexOf('alipay') !== -1) {
    browserType.value = 'alipay'
  } else {
    browserType.value = 'unknown'
  }
}

onMounted(() => {
  detectBrowser()
})

// 处理支付
const handlePay = (channel: string) => {
  const queryParams = {
    orderNo: orderNo.value,
    timestamp: timestamp.value,
    nonce: nonce.value,
    sign: sign.value
  }

  router.push({
    path: `/pay/${channel}`,
    query: queryParams
  })
}
</script>

<style scoped>
.ant-card {
  border-radius: 8px;
}

.ant-descriptions-item-label {
  width: 120px;
  color: #666;
}

/* 微信支付按钮样式 */
.wechat-button {
  background-color: #07C160 !important;
  border-color: #07C160 !important;
  color: white !important;
}

.wechat-button:hover {
  background-color: #06ae56 !important;
  border-color: #06ae56 !important;
}

.wechat-button:active {
  background-color: #059a4d !important;
  border-color: #059a4d !important;
}

/* 支付宝支付按钮样式 */
.alipay-button {
  background-color: #1677FF !important;
  border-color: #1677FF !important;
  color: white !important;
}

.alipay-button:hover {
  background-color: #4096FF !important;
  border-color: #4096FF !important;
}

.alipay-button:active {
  background-color: #0958d9 !important;
  border-color: #0958d9 !important;
}
</style>
